<template>
  <div class="breadcrumb-comp">
    <div class="breadcrumb-list">
      <span>当前位置：&nbsp;</span>
      <div
        v-for="(item, index) in data"
        :class="['breadcrumb-item', index >= data.length - 1 ? 'current' : '']"
        :key="index"
        :title="item.name || ''"
        @click="handleclick(item)"
      >
        <span :title="item.name">{{ item.name }}</span>
        <i v-if="index < data.length - 1" class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="btn-container">
      <slot v-if="$slots.btn" name="btn"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "breadcrumbComp",
  props: {
    /**
     * 面包屑导航数据
     * @param [{ name: 显示文案, path: 路由路径，disable: 是否禁用 }]
     */
    data: {
      type: Array,
      default: () => []
    },
    // 是否使用
    useRoute: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    // 切换面包屑
    handleclick(item) {
      const { path, disable } = item;
      if (this.useRoute && path && !disable) {
        this.$router.push(path);
      }
      this.$emit("click", item);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/main";

.breadcrumb-comp {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: $mainBg;
  color: $mainColor;
  // border-bottom: 1px solid $mainBorder;
  .breadcrumb-list {
    font-size: 14px;
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    .breadcrumb-item {
      max-width: 300px;
      height: 100%;
      margin-right: 40px;
      display: flex;
      align-items: center;
      position: relative;
      &.current {
        color: #909399;
        span {
          cursor: no-drop;
        }
      }
      span {
        max-width: 300px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      i {
        position: absolute;
        right: -30px;
      }
    }
  }
  .btn-container {
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
